<!DOCTYPE html>
<html ng-app="YouTubeViewerApp" ng-csp="">
	<head>
		<title>Desktop App for YouTube&trade;</title>
		<link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/bootstrap-theme.min.css" rel="stylesheet">
		<link href="css/youtubeviewer.css" rel="stylesheet" type="text/css">
		<base target="_blank">
		<style>
			body {
			}
			.carousel-inner > .item > img, .carousel-inner > .item > a > img {
				margin: -45px auto auto auto;
			}

			#videos-carousel .item {
				height: 314px;
			}

			#videos-carousel .carousel-control {
				top: 40%;
				font-size: 48px;
			}

		</style>
	</head>
	<body id="youtubeviewer" ng-controller="YouTubeViewerController">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12">
					<form ng-submit="search()" role="search">
						<div class="form-group">
							<div class="input-group">
								<input id="serch-term" ng-model="searchTerm" type="text" class="form-control" placeholder="Search for videos" />
								<span class="input-group-btn">
									<button type="submit" class="btn btn-default"><img src="search.png"></img></button>
								</span>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div id="videos-carousel" ng-show="youTubeVideos.length > 0" class="carousel slide" data-ride="carousel" data-interval="false">
						<!-- Wrapper for slides -->
						<div class="carousel-inner">
							<div ng-repeat="youTubeVideo in youTubeVideos" ng-class="{item: true, active: ($index === 0)}" ng-click="popout($index)">
								<img ng-src="{{youTubeVideo.thumbnail}}" alt="{{youTubeVideo.title}}">
								<div class="carousel-caption">
									<h6 class="badge">{{$index+1}} of {{youTubeVideos.length}}</h6>
									<h4>{{youTubeVideo.title}}</h4>
									<small>{{youTubeVideo.description}}</small>
								</div>
							</div>
						</div>

						<!-- Controls -->
						<a class="left  carousel-control" href="#videos-carousel" role="button" data-slide="prev"><img src="prev.png"></img></a>
						<a class="right carousel-control" href="#videos-carousel" role="button" data-slide="next"><img src="next.png"></img></a>
					</div>
				</div>
			</div>
		</div>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>
		<script src="js/angular.min.js"></script>
		<script src="js/youtubeviewer.js"></script>
	</body>
</html>